<template>
  <div class="container">
    <div id="placeholder"></div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import axios from 'axios'
import {ref} from "vue";

const router = useRouter();
const route = useRoute();
const docEditor = ref(null)
const userList = ref([])

const getConfig = () => {
  axios.get('http://192.168.10.168:88/dev-api/file/config', {
    params: {
      fileId: route.params.fileId,
      mode: 'EDIT',
      userId: route.query.userId
    }
  }).then(res => {
    let config = res.data.data
    config.events = {
      onRequestUsers
    }
    docEditor.value = new DocsAPI.DocEditor("placeholder", config);
  })
}

const onRequestUsers = (event) => {
  const c = event.data.c
  const id = event.data.id

  axios.get('http://192.168.10.168:88/dev-api/user')
      .then(res => {
        userList.value = res.data.data

        docEditor.value.setUsers({
          c: event.data.c,
          users: userList.value.map(user => {
            return {
              email: '',
              id: user.userId,
              image: user.userImage,
              name: user.userName
            }
          })
        })
      })
};

getConfig()
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
}

iframe {
  height: 100vh;
  width: 100vw;
}
</style>